import React, {Component, PropTypes} from 'react'
import ReactHighcharts from 'react-highcharts'


export  default class HighChartsColumnComponent extends Component {
  constructor(props) {
    super(props)
  }
  shouldComponentUpdate(nextprops){
    return this.props.series!==nextprops.series||this.props.scales!==nextprops.scales||this.props.isLoading!=nextprops.isLoading||this.props.needDateState!==nextprops.needDateState
  }
  render() {
    const columnConfig = {
      chart: {
        type: 'column'
      },
      credits: {
        enabled: false
      },
      title: {
        text: this.props.title
      },
      subtitle: {
        text: this.props.subtitle
      },
      loading: {
        labelStyle: {
          color: 'white'
        },
        style: {
          backgroundColor: 'gray'
        }
      },
      xAxis: {
        type: 'category',
        categories: this.props.scales
      },
      yAxis: {
        title: {
          text: null
        }

      },
      legend: {
        enabled: false
      },
      plotOptions: {
        series: {
          borderWidth: 0,
          dataLabels: {
            enabled: true,
            format: '{point.y}'
          }
        }
      },

      tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}'
      },
      series: this.props.series
    }
    return (
      <div className="chart-wrap">
        <div className="chart-nav">
          {this.props.nextReport !== null &&
          <div className="chart-next" onClick={e=>this.props.handleNextReport(this.props.nextReport)}>＞</div>
          }
          {  this.props.prevReport!==null&&
          <div className="chart-pre" onClick={e=>this.props.handlePreReport(this.props.prevReport)}>＜</div>
          }
        </div>
        <ReactHighcharts className='chart-border' config={columnConfig} callback={this.afterRender}>

      </ReactHighcharts></div>
    )
  }



  afterRender = (chart)=> {
    const {isLoading, needDateState}=this.props
    if (isLoading) {

      if (needDateState) {
        chart.showNoData('请选择日期')
      } else {
        chart.showNoData(" ")
        chart.showLoading()
      }
    } else {
      chart.hideLoading()
      chart.showNoData("无数据")

    }
  }
}

